容器 Container

網頁是設計來給人看的嘛，
構成一個網頁的所有元件，不外乎是以下幾種：

• 文字 text
• 圖片 image
• 連結 a
• 輸入框 input

以及包住以上所有元素的容器 container

僅運用這五大元素的排列組合，
就構成了當今所看到大大小小的網頁。

其中比較跟文章內容無關的是容器，
容器通常會拿來作包裝、排版，把相同樣式或同樣區塊的網頁元素包起來。

容器之中當然可以再包另一個容器，
就像家裡的大櫃子裡擺放著小櫃子，
小櫃子裡放著小盒子、小盒子裡放著書籤、迴紋針等等內容物

容器可以顯現出來、也可以隱藏起來，
可以有寬度、高度，也可以設定成沒有。
當然也可以玩所謂的俄羅斯娃娃

容器一詞聽起來簡單明瞭，
但麻煩的地方在於，到底該怎麼去算他的長度、寬度？
為何怎麼設都不是預期想要的結果？

如果要計算容器的大小，每個容器都可以想像成是一個盒子(Box)，
只是這個盒子並不太友善。

盒模型 box model

這張圖就是所謂的盒模型(Box Model)

嗯，當初看到這張圖時一臉懵逼。

打個簡單的比喻好了：

我今天有個紙箱在這，我想裝點什麼東西進去

content 是放進紙箱的內容物，
我今天可以裝大東西、小東西進去，
當然也可以啥都不放、就此罷手

padding 我在紙箱裡安置了一瓶58高粱酒，
放了易碎物品，當然需要厚厚一層氣泡紙、泡棉墊來包住內容物、作為緩衝，
不然運輸中炸裂怎麼辦？

border 觀察紙箱本身，可以看出紙箱的厚度、紙漿材質有沒有扎實

margin 沒料到的是，這個紙箱有點頑固，
紙箱說他要一個人佔據角落的位置，
我只好把周圍空間騰出來，成全他離其他紙箱遠一點，讓他成為邊緣紙箱。

一個盒模型就由以上這四種空間距離所組成。

計算盒模型方式 box-sizing

CSS有兩種計算盒模型的方式，兩者計算方法完全不同。

box-sizing: border-box;
box-sizing: content-box;

我今天紙箱裡面裝著 一打58高粱酒、20公分厚的泡棉墊、以及厚度3公分的紙箱
並且要求在紙箱周圍騰出空間

content-box

是預設計算方式
BOX實際長寬度是 height或width + padding + border

今天我拿著紙箱，要求送貨老闆幫我載貨運送
老闆說：「你這個價錢要這樣算，我用內容物價錢跟你收費，
紙箱的邊緣費就不跟你收了，
就只收你 一打58高梁酒(空間) + 20公分泡棉墊 + 3公分厚紙箱 的錢啦！」

錢就是實際長寬

border-box

調整border、padding
讓BOX最終實際長寬度變成height或width

我再度拿著紙箱，要求另一個送貨老闆幫我載貨運送
老闆說：「哎呀，我們這邊是先收費餒，你有多少就給多少，
蛤，你錢不夠喔？
這樣的話只能請你想辦法讓紙箱小一點了吶！」

錢不夠的情況下，我只能回去重新包裝，
但我就是要送 一打58高梁酒(內容物) 阿，
所以只能重新調整 20公分泡棉墊 、 3公分厚紙箱 的寬度了

看完以上的故事之後，再回來看 content、padding、border、margin

BOX 由 margin、padding、border、content 所組成

將width和height 等內容(content)設定完後，
在預設情況下，只有padding、border 會影響到實際的BOX長度寬度。

content

泛指人能在瀏覽器上看到的東西，
如: 標題、列表、文字、圖片等被包在標籤裡面的內容物，

padding 邊距、填充、留白

向內填充物
元素的內容(content)與元素自身的距離

使用時機：

• 需在border內側添加空白時(以自身border為基準向內推、向內擠壓)
• 空白處需要背景色時

border 邊框、線條、邊界

邊框厚度、實體內容往外長的空間

margin 邊界

向外做推擠，這邊的"外"指的是與其他元素的邊界距離
ex: 同層元素間相鄰的距離、元素與父元素間的距離

只會做推擠，不影響BOX本身寬高

使用時機：

• 需在border外側添加空白時(以自身border為基準向外推)
• 空白處不需要背景色時